<template>
    <div>
        <Header :activIndex = "3"></Header>
        <div class="top_big">
            <img :src="banImg" alt="">
        </div>
        <div class="main_width" style="min-height:600px">
            <div class="nav"></div>
            <div>
                <div class="pro_tit">政策法规</div>
                <el-table
                :data="tableData"
                height="600"
                style="width: 100%" class="tab_mar" @row-click="toDetails">
                <el-table-column
                    prop="ruleTitle"
                    label="标题"
                    width="1000"
                    >
                </el-table-column>
                <el-table-column
                    prop="createDate"
                    label="发布时间"
                    width="200"
                    align="center"
                    >
                </el-table-column>
                </el-table>
                <div class="tc">
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="10"
                        layout="total, prev, pager, next, jumper"
                        :total="totalPage">
                    </el-pagination>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
 	import Header from "../components/header"
    export default {
        components: {
          Header,  
        },        
        data(){
            return {
                banImg:'',
                 tableData:[
                    {
                        title:'',
                        date:128
                    },
                    {
                        title:'...',
                        date:128
                    },
                    {
                        title:'...',
                        date:128
                    },
                    {
                        title:'...',
                        date:128
                    },
                ],
                totalPage:100,
                currentPage:1
            }
        },
        mounted(){
            this.getData(1);
        },
        methods:{
            toDetails(val){
                var routeData = ''
                routeData = this.$router.resolve({ name: 'policyDetails',query:{id:val.ruleId}});
                window.open(routeData.href, '_blank');                
            },
            getData(page){
                this.get('/api/rules/page',{
                    page:page,
                    limit:10,
                    ruleTypes:1,
                    orderField: 'create_date',
					order: 'desc'
                }).then(data=>{
                    this.tableData=data.data.list
                    this.totalPage=data.data.total
                });
                this.get('/api/rules/indexss').then(data=>{
                    if(data.data.slideDTOList.length!=0){
                        this.banImg=data.data.slideDTOList[0].slideImage
                    }
                })
            },
            handleCurrentChange(page){
                console.log(page);
                this.getData(page);
            }
        }
    }
</script>
<style lang="scss" scoped>
    .tc{
        text-align: center
    }
    .w15{
        width: 15%
    }
    .w85{
        width: 82%;
    }
    .lf_tit_item{
        font-size: 15px;
        text-align: center;
        margin: 10px 0;
        position: relative;
        cursor: pointer;
        >i{
            position: absolute;
            left: 0;
            top: 3px
        }
    }
    .pro_tit{
        width: 15%;
        background: #2C9F45;
        color: #fff;
        text-align: center;
        font-size: 18px;
        padding: 10px 0;
    }
    .item_bor{
        border-bottom: 2px dotted #CCCCCC;
        padding-bottom:10px; 
    }
    .block_tit{
        border-bottom: 2px solid #2C9F45;
        display: flex;
        justify-content: space-between;
        align-items: center
    }
    .block_tit>div:first-child{
        font-size: 18px;
        letter-spacing:5px;
        color: #2C9F45;
        padding: 10px;
        padding-top: 0 
    }
    td{
        border-bottom: 0!important
    }
    .tab_mar{
        margin:20px 0
    }
    .tit_active{
        color: #2C9F45
    }
    .top_big{height: 490px;}
    .top_big img{
        width: 100%;background: no-repeat center / cover;height: 100%;
    }
</style>